<template>
	<nt-container bg-color="#F6F5FA">
		<view class="reservation-container">
			<view class="reservation-header">
				<view class="reservation-info">
					<view class="reservation-info__title">{{orderInfo.area}}{{orderInfo.district}}{{orderInfo.address}}
					</view>
					<view class="reservation-info__desc">{{orderInfo.mtype}}/{{orderInfo.remarks || '--'}}</view>
				</view>
			</view>
			<view class="reservation-body">
				<view class="reservation-body__left">
					<view class="reservation-body__left--item" :class="{ active: dateIndex === index }"
						@tap="dateIndex = index" v-for="(d, index) in dateTabs" :key="d.value">{{ d.name }}</view>
				</view>
				<view class="reservation-body__right">
					<view class="reservation-body__right--item"
						:class="{ active: index === timeIndex || setView(t), disabled: t.disabled }"
						v-for="(t,index) in timeTabs" :key="t.id" @tap="!setView(t)?selectTime(t, index):null"
						v-if="!t.disabled">
						<view class="reservation-body__right--item__detail" v-if="index === timeIndex">
							<view class="reservation-body__right--item__detail-current">当前</view>
							<view class="reservation-body__right--item__detail-header">{{t.timeLine.join(' - ')}}</view>
							<view class="reservation-body__right--item__detail-addr">
								{{orderInfo.area}}{{orderInfo.district}}{{orderInfo.address}}
							</view>
							<view class="reservation-body__right--item__detail-type">{{orderInfo.mtype}}</view>
						</view>
						<view class="reservation-body__right--item__detail" style="border-color: #ffa500; color:#ffa500"
							v-else-if="setView(t)">
							<view class="reservation-body__right--item__detail-header" style="color:#ffa500">
								{{t.timeLine.join(' - ')}}</view>
							<view class="reservation-body__right--item__detail-addr" style="color:#ffa500">
								{{t.area}}{{t.district}}{{t.address}}
							</view>
							<view class="reservation-body__right--item__detail-type" style="color:#ffa500">{{t.mtype}}</view>
						</view>
						<view class="reservation-body__right--item__time" v-else>{{ t.lable }}</view>
					</view>
				</view>
			</view>
			<view class="reservation-footer">
				<nt-button text="确定时间" :loading="loading" @click="submitUpdate"></nt-button>
			</view>
		</view>
	</nt-container>
</template>

<script>
	import dayjs from "dayjs"
	import {
		getDateAfter,
		getHalfHours
	} from "@/utils"
	import {
		getOrderDetail,
		updateAppointmentTime,
		getOrderAppointment,
		getOrderList
	} from "@/api"
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				dateTabs: [],
				dateIndex: 0,
				timeTabs: [],
				timeIndex: 0,
				orderList: [],
				loading: false
			}
		},
		watch: {
			"dateIndex": {
				handler: function(nv) {
					this.timeIndex = 0;
					this.setUsebleTime(nv)
				},
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.getOrderList()
			this.setDateTabs()
			this.setTimesList()
			this.getDetail()
			this.setUsebleTime(0)
		},
		methods: {
			setView(t) {
				const result = this.orderList.find(o => o.appointment === t.appointment)
				if (result) {
					for (const key in result) {
						t[key] = result[key]
					}
				}
				return result ? true : false
			},
			// 提交修改
			submitUpdate() {
				if (this.timeIndex < 0) return this.toast("请选择预约时间");
				const d = this.dateTabs[this.dateIndex].value
				const t = this.timeTabs[this.timeIndex].timeLine[0]
				const appointmentTime = `${d} ${t}:00`
				if (this.loading) return;
				this.loading = true;
				updateAppointmentTime(this.orderId, appointmentTime).then(res => {
					if (res.code === 1) {
						this.toast("修改成功")
						setTimeout(() => {
							this.loading = false;
							this.back()
							uni.$emit('changeList')
						}, 1000)
					}
				})

			},
			async getOrderList() {
				const {
					code,
					data
				} = await getOrderAppointment()
				if (code == 1 && data.length > 0) {
					this.orderList = data
				}
			},
			getDetail() {
				getOrderDetail(this.orderId, 'postAppointment').then(res => {
					this.orderInfo = res.data;
				})
			},
			setDateTabs() {
				this.dateTabs = getDateAfter().map((item, index) => {
					let tab = {}
					if (index === 0) {
						tab.name = "今天"
					} else if (index === 1) {
						tab.name = "明天"
					} else {
						let d = item.split("-")
						tab.name = `${d[1]}月${d[2]}号`
					}
					tab.value = item;
					return tab;
				})
				console.log(this.dateTabs)
			},
			setTimesList() {
				this.timeTabs = getHalfHours().map(item => {
					item.lable = item.timeLine[0]
					item.disabled = false
					return item;
				})
			},
			// 选择预约时间
			selectTime(v, index) {
				if (v.disabled) return this.toast("当前时间不可预约")
				this.timeIndex = index
			},
			// 设置可用时间
			setUsebleTime(dIndex) {
				const currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
				// 当前时间
				const timeStamp = dayjs(currentTime).valueOf();
				this.timeTabs.map(item => {
					const start = `${this.dateTabs[dIndex].value} ${item.timeLine[0]}:00`
					const end = `${this.dateTabs[dIndex].value} ${item.timeLine[1]}:00`
					const sTimeStamp = dayjs(start).valueOf()
					const eTimeStamp = dayjs(end).valueOf()
					item.disabled = (timeStamp > sTimeStamp && timeStamp > eTimeStamp) || (timeStamp >
						sTimeStamp && timeStamp < eTimeStamp)
					item.appointment = start
				})
				this.timeIndex = this.timeTabs.findIndex(item => !item.disabled)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$bg-color: #F6F5FA;

	.reservation {
		&-container {}

		&-header {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
		}

		&-info {
			border-radius: 20rpx;
			background: $bg-color;
			padding: 30rpx;
			box-sizing: border-box;
			color: #333333;

			&__title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			&__desc {
				font-size: 28rpx;
			}
		}

		&-body {
			display: flex;
			background: #fff;
			height: calc(100vh - 350rpx);

			&__left {
				width: 170rpx;
				height: 100%;
				background: $bg-color;

				&--item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999;

					&.active {
						background: #fff;
						color: var(--theme-color);
					}
				}
			}

			&__right {
				flex: 1;
				background: #fff;
				height: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				overflow-y: scroll;

				&--item {
					height: 100rpx;
					color: #333;
					font-size: 28rpx;

					&.active {
						height: auto;
					}

					&.disabled {
						opacity: 0.5;
					}

					&__time {
						display: flex;
						align-items: center;
						height: 100%;
						margin-left: 40rpx;
					}

					&__detail {
						position: relative;
						padding: 25rpx 35rpx;
						background: #F8F9FD;
						border-radius: 10rpx;
						border: 1rpx solid var(--theme-color);
						box-sizing: border-box;
						overflow: hidden;

						&-current {
							width: 80rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #fff;
							font-size: 24rpx;
							background-color: var(--theme-color);
							text-align: center;
							border-bottom-left-radius: 10rpx;
							position: absolute;
							right: 0;
							top: 0;
						}

						&-header {
							border-bottom: 1rpx solid #818DB0;
							padding-bottom: 35rpx;
							color: var(--theme-color);
							font-weight: bold;
						}

						&-addr {
							font-size: 28rpx;
							font-weight: bold;
							color: #3e4f84;
							margin: 30rpx 0
						}

						&-type {
							color: var(--theme-color);
							font-size: 28rpx;
						}
					}
				}
			}
		}

		&-footer {
			height: 160rpx;
			background: $bg-color;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			/deep/ .button-container {
				width: 100%;
			}

		}
	}
</style>